<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery-ztree-2.5.js"></script>
  <script type="text/javascript" src="asyncData/demoData.js"></script>
  <script type="text/javascript" src="demoTools.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1;
	var setting;

	setting = {
		checkable : true,
		expandSpeed : false,
		callback: {
			beforeClick: zTreeBeforeClick,
			click:	zTreeOnClick,
			change: zTreeOnChange
		}
	};

	$(document).ready(function(){
		reloadTree();
		initCopyEvent();
	});

	function initSrcNode() {
		$("#renameTxt").attr("value", "");
		$("#curNodePath").html(getNodePath(null));
		showCopy(null);
		showPaste(null);
	}
	
	function zTreeOnClick(event, treeId, treeNode) {
		$("#curNodePath").html(getNodePath(treeNode));
		$("#renameTxt").attr("value", treeNode.name);
		showCopy(treeNode);
		showPaste(treeNode);
	}
	function zTreeBeforeClick(treeId, treeNode) {
		var canClick = (treeNode!=zTree1.getSelectedNode());
		if (!canClick) {
			zTree1.cancelSelectedNode();
			initSrcNode();
		}
		return canClick;
	}
	
	function zTreeOnChange(event, treeId, treeNode) {
		getNodes();
	}
	
	function expandAll(expandSign) {
		zTree1.expandAll(expandSign);
	}

	function expandNode(expandSign) {
		var srcNode = zTree1.getSelectedNode();
		if (srcNode) {
			zTree1.expandNode(srcNode, expandSign, $("#sonChk").attr("checked"));
		}
	}

	var addCount = 1;
	function addNode(type) {
		setOperatePool();
		var srcNode = zTree1.getSelectedNode();
		var newNode = [{ name:"增加" + (addCount++)}];
		if (type=="p") newNode[0].isParent = true;
		zTree1.addNodes(srcNode, newNode);
		getNodes();
	}
	function removeTreeNode() {
		var srcNode = zTree1.getSelectedNode();
		if (srcNode) {
			if (srcNode.nodes && srcNode.nodes.length > 0) {
				var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
				if (confirm(msg)==true){
					setOperatePool();
					zTree1.removeNode(srcNode);
					initSrcNode();
				}
			} else {
				setOperatePool();
				zTree1.removeNode(srcNode);
				initSrcNode();
			}
		}	
		getNodes();
	}

	function getPreTreeNode(treeNode) {
		if (treeNode.isFirstNode) return null;
		var nodes = treeNode.parentNode ? treeNode.parentNode.nodes : zTree1.getNodes();
		var preNode;
		for (var i=0; i<nodes.length; i++) {
			if (nodes[i] == treeNode) {
				return preNode;
			}
			preNode = nodes[i];
		}
	}
	function getNextTreeNode(treeNode) {
		if (treeNode.isLastNode) return null;
		var nodes = treeNode.parentNode ? treeNode.parentNode.nodes : zTree1.getNodes();
		for (var i=0; i<nodes.length; i++) {
			if (nodes[i] == treeNode) {
				return nodes[i+1];
			}
		}
	}
	
	function moveTreeNode(move) {
		var srcNode = zTree1.getSelectedNode();
		if (!srcNode) {
			alert("请先选中一个节点");
			return;
		}
		var moveType = "inner";
		var targetNode = "";
		if (move == "up") {
			moveType = "before";
			targetNode = getPreTreeNode(srcNode);
		} else if (move == "down") {
			moveType = "after";
			targetNode = getNextTreeNode(srcNode);
		} else if (move == "left") {
			moveType = "after";
			targetNode = srcNode.parentNode;
		} else if (move == "right") {
			moveType = "inner";
			targetNode = getPreTreeNode(srcNode);
		}
		if (srcNode && targetNode) {
			setOperatePool();
			zTree1.moveNode(targetNode, srcNode, moveType);
		}	
		getNodes();
		zTree1.selectNode(srcNode);
	}

	function getNodes() {
		var a = zTree1.transformToArray(zTree1.getNodes());
		$("#allNum").html(a.length);
		a = zTree1.getCheckedNodes();
		$("#allCheckNum").html(a.length);
		
	}

	function makeListName(node) {
		var space = "";
		for (var s = 0; s<node.level; s++ ) {
			space = space + "--";
		}
		return space + node.name + "(" + node.tId + ")";
	}

	function renameTreeNode(txtObj) {
		var srcNode = zTree1.getSelectedNode();
		if (!srcNode) {
			alert("请先选中一个节点");
			$("#renameTxt").attr("value", "");
			return;
		}
		if (srcNode.name != txtObj.value) {
			setOperatePool();
			srcNode.name = txtObj.value;
			zTree1.updateNode(srcNode);
			zTree1.selectNode(srcNode);
		}
		
	}
	function checkTreeNode(checked) {
		var srcNode = zTree1.getSelectedNode();
		if (!srcNode) {
			alert("请先选中一个节点");
			return;
		}
		var oldNodes = clone(zTree1.getNodes());
		var oldcheckNum = zTree1.getCheckedNodes(checked).length;
		var connFlag = $("#connTrue").attr("checked");
		srcNode.checked = checked;
		zTree1.updateNode(srcNode, connFlag);
		var newcheckNum = zTree1.getCheckedNodes(checked).length;
		if (newcheckNum != oldcheckNum) setOperatePool(oldNodes);
	}
	function checkAllTreeNode(checked) {
		var oldNodes = clone(zTree1.getNodes());
		var oldcheckNum = zTree1.getCheckedNodes(checked).length;
		zTree1.checkAllNodes(checked);
		var newcheckNum = zTree1.getCheckedNodes(checked).length;
		if (newcheckNum != oldcheckNum) setOperatePool(oldNodes);
	}

	function getNodeByParam() {
		var key = $("#searchKey").get(0).value;
		if (key.length > 0) {
			var treeNode = zTree1.getNodeByParam("name", key);
			if (treeNode) {
				alert("找到节点信息: \ntId=" + treeNode.tId + ", name=" + treeNode.name + ", level=" + treeNode.level);
			} else {
				alert("没有找到匹配的节点，请更换搜索条件");
			}
		}
	}
	function getNodesByParamFuzzy() {
		var key = $("#searchKeyFuzzy").get(0).value;
		if (key.length > 0) {
			var treeNodes = zTree1.getNodesByParamFuzzy("name", key);
			if (treeNodes && treeNodes.length>0) {
				var msg = "找到节点信息: ";
				for (var i=0; i<treeNodes.length; i++) {
					msg += ("\n(" + (i+1) + ") tId=" + treeNodes[i].tId + ", name=" + treeNodes[i].name + ", level=" + treeNodes[i].level); 
				}
				alert(msg);
			} else {
				alert("没有找到匹配的节点，请更换搜索条件");
			}
		}
	}
	
	function getNodesByParam() {
		var key = $("#searchKey2").get(0).value;
		if (key.length == 0 || isNaN(key)) {
			alert('请输入数字！')
			return; 
		}
		key = parseInt(key);
		var treeNodes = zTree1.getNodesByParam("level", key);
		if (treeNodes && treeNodes.length>0) {
			var msg = "找到节点信息: ";
			for (var i=0; i<treeNodes.length; i++) {
				msg += ("\n(" + (i+1) + ") tId=" + treeNodes[i].tId + ", name=" + treeNodes[i].name + ", level=" + treeNodes[i].level); 
			}
			alert(msg);
		} else {
			alert("没有找到匹配的节点，请更换搜索条件");
		}
	}

	function reloadTree(node) {
		zTree1 = $("#treeDemo").zTree(setting, node?node:clone(zNodes));
		$("#renameTxt").attr("value", "");
		$("#curNodePath").html("[Root]");
		getNodes();
		initCopy();
		refreshOperatePool();
	}	

	function getNodePath(treeNode) {
		if (!treeNode) return "[Root]";
		var p = "[" + treeNode.name + "]";
		var pNode = treeNode.parentNode;
		while (pNode != null) {
			p = "[" + pNode.name + "] -- " + p;
			pNode = pNode.parentNode;
		}
		p = "[Root] -- " + p;
		return p;
	}

	function initCopyEvent() {
		$("#jCopy").bind("dblclick", noSelection);
		$("#jCut").bind("dblclick", noSelection);
		$("#jPaste").bind("dblclick", noSelection);
		$("#jRollback").bind("dblclick", noSelection);
		$("#jRedo").bind("dblclick", noSelection);
	}
	function noSelection(event) {
		event.target.blur();
		window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
		return false;
	}
	function initCopy() {
		$("#jCopy").attr("class","disabled");
		$("#jCut").attr("class","disabled");
		$("#jPaste").attr("class","disabled");
	}
	function showCopy(treeNode) {
		var canPaste = true;
		if (!treeNode) canPaste = false; 
		if (canPaste) {
			$("#jCopy").attr("class","able");
			$("#jCut").attr("class","able");
		} else {
			$("#jCopy").attr("class","disabled");
			$("#jCut").attr("class","disabled");
		}
		
	}
	function showPaste(targetNode) {
		var canPaste = true;
		
		if (!clipboard.srcNode || targetNode == clipboard.srcNode) {
			canPaste = false;
		} else if (clipboard.type) {
			if (targetNode == clipboard.srcNode.parentNode && clipboard.type=="cut") {
				canPaste = false;
			} else if (targetNode) {
				var tmpParent = targetNode.parentNode;
				while (tmpParent && tmpParent != clipboard.srcNode) {
					tmpParent = tmpParent.parentNode;
				}
				if (tmpParent) {
					canPaste = false;
				}
			}
		}
		 
		if (canPaste) {
			$("#jPaste").attr("class","able");
		} else {
			$("#jPaste").attr("class","disabled");
		}
	}
	var clipboard = {};
	function zCopy(type) {
		var treeNode = zTree1.getSelectedNode();
		if ($("#jCopy").attr("class") == "disabled" || !treeNode) {
			alert("请先选择需要" + (type=="copy"?"复制":"剪切") + "节点..");
		} else if (treeNode) {
			clipboard.type = type;
			clipboard.srcNode = treeNode;
			$("#jClip").text("......[" + treeNode.name + "] 被" + (type=="copy"?"复制":"剪切"));
		}
	}
	function zPaste() {
		var treeNode = zTree1.getSelectedNode();
		if (!clipboard.srcNode) {
			alert("请先 复制 或 剪切 节点..");
		} else if ($("#jPaste").attr("class") == "disabled") {
			alert("无法粘贴..");
		} else {
			if (clipboard.type=="copy") {
				setOperatePool();
				var cSrcNode = clone(clipboard.srcNode);
				zTree1.addNodes(treeNode, cSrcNode, false);
				zTree1.selectNode(cSrcNode);
			} else if (clipboard.type=="cut") {
				setOperatePool();
				zTree1.removeNode(clipboard.srcNode);
				zTree1.addNodes(treeNode, clipboard.srcNode, false);
				zTree1.selectNode(clipboard.srcNode);
				showCopy(clipboard.srcNode);
				clipboard.type==null;
				clipboard.srcNode = null;
				showPaste(clipboard.srcNode);
				$("#jClip").text("");
			}
		}
	}
	var opreatePool = [];
	var lastNode = null;
	var poolCursor = -1;
	var poolMax = 20;
	function setOperatePool(nodes) {
		
		var n = nodes ? nodes : clone(zTree1.getNodes());
		opreatePool.splice(poolCursor+1, (opreatePool.length-poolCursor-1), n);
		if (opreatePool.length>poolMax) {
			opreatePool.splice(0,1);
		}
		poolCursor = opreatePool.length-1;
		refreshOperatePool();
		lastNode = null;
	}
	function operateRollback() {		
		if (poolCursor>=0) {
			if (!lastNode) {
				lastNode = zTree1.getNodes();
			}
			var n = clone(opreatePool[poolCursor]);
			reloadTree(n);
			poolCursor--;
		}
		refreshOperatePool();
	}
	function operateRedo() {
		if (poolCursor<(opreatePool.length-2)) {
			poolCursor++;
			var n = clone(opreatePool[poolCursor+1]);
			reloadTree(n);
		} else if (lastNode) {
			poolCursor++;
			reloadTree(lastNode);
			lastNode = null;
		}
		refreshOperatePool();
	}
	function refreshOperatePool() {
		if (poolCursor>=0) {
			$("#jRollback").attr("class","able");
		} else {
			$("#jRollback").attr("class","disabled");
		}
		if (poolCursor<(opreatePool.length-1)) {
			$("#jRedo").attr("class","able");
		} else {
			$("#jRedo").attr("class","disabled");
		}
		$("#jOperatePool").html("操作记录: " + opreatePool.length + ", 游标位置: " + (poolCursor+1));
	}
	
  //-->
  </SCRIPT>
 </HEAD>

<BODY>
<center class="headTitle">Javascript 操作演示</center>
<TABLE border=0 width="700" class="tb1">
	<TR>
		<TD width=340px align=center valign=top>
		<div class="zTreeDemoBackground">
			<ul id="treeDemo" class="tree"></ul>
		</div>		
		</TD>
		<TD width=360px align=left valign=top>
		<div class="demoContent">
			<li class="title focus">
				<button class="ico star" onfocus="this.blur();"></button>获取数据
				<ul class="remark">1、总节点数：<span id="allNum"></span>; 总Check节点数：<span id="allCheckNum"></span></ul>
				<ul class="remark" style="white-space: normal;">2、当前选中节点</ul>
				<ul class="event"><li><span id="curNodePath"></span></li></ul>
			</li>
			<li class="title focus">
				<button class="ico star" onfocus="this.blur();"></button>操作指示
				<ul class="operate">
					[<a id="jCopy" class="disabled" onclick="zCopy('copy'); return false;">复制</a>] [<a id="jCut" class="disabled" onclick="zCopy('cut'); return false;">剪切</a>] [<a id="jPaste" class="disabled" onclick="zPaste(); return false;">粘贴</a>]
					<span id="jClip" class="info"></span>
				</ul>
				<ul class="operate">
					[<a id="jRollback" class="disabled" onclick="operateRollback(); return false;">撤销</a>] [<a id="jRedo" class="disabled" onclick="operateRedo(); return false;">重做</a>]
					&nbsp;&nbsp;&nbsp;&nbsp;<span id="jOperatePool" class="info"></span>
				</ul>
				<ul class="operate">
					修改节点名称: <input type="text" value="" id="renameTxt" onchange="renameTreeNode(this);"></input> 
				</ul>
				<ul class="operate">
					增加父节点: <button class="ico addNode" onfocus="this.blur();" title="增加父节点" onclick="addNode('p');"></button>
					增加叶子节点: <button class="ico addNode" onfocus="this.blur();" title="增加叶子节点" onclick="addNode();"></button>
					删除节点: <button class="ico removeNode" onfocus="this.blur();" title="删除节点" onclick="removeTreeNode();"></button>
				</ul>
				<ul class="operate">
					修改选中节点Check状态：<button class="ico checkNode" onfocus="this.blur();" title="Check节点" onclick="checkTreeNode(true);"></button>
					<button class="ico unCheckNode" onfocus="this.blur();" title="unCheck节点" onclick="checkTreeNode(false);"></button>
					<br/>父子关联：<INPUT TYPE="radio" id="connTrue" name="connRadio" onfocus="this.blur();">true;&nbsp;
					<INPUT TYPE="radio" id="connFalse" name="connRadio" checked onfocus="this.blur();">false
				</ul>
				<ul class="operate">
					修改全部节点Check状态：<button class="ico checkNode" onfocus="this.blur();" title="Check全部节点" onclick="checkAllTreeNode(true);"></button>
					<button class="ico unCheckNode" onfocus="this.blur();" title="unCheck全部节点" onclick="checkAllTreeNode(false);"></button>
				</ul>
				<ul class="operate">
					移动选中节点: 
					<button class="ico up" onfocus="this.blur();" title="同级向上移动" onclick="moveTreeNode('up');"></button>
					<button class="ico down" onfocus="this.blur();" title="同级向下移动" onclick="moveTreeNode('down');"></button>
					<button class="ico left" onfocus="this.blur();" title="成为父节点同级节点" onclick="moveTreeNode('left');"></button>
					<button class="ico right" onfocus="this.blur();" title="成为前一个节点的子节点" onclick="moveTreeNode('right');"></button>
				</ul>
				<ul class="operate">
					选中节点:&nbsp;展开<button class="ico expandNode" onfocus="this.blur();" title="展开选中节点" onclick="expandNode(true);"></button>
					折叠<button class="ico collapseNode" onfocus="this.blur();" title="折叠选中节点" onclick="expandNode(false);"></button>
					&nbsp;<input type="checkbox" id="sonChk" /> 是否包含子节点
				</ul>
				<ul class="operate">
					全部节点:&nbsp;展开<button class="ico expandNode" onfocus="this.blur();" title="全部展开" onclick="expandAll(true);"></button>
					折叠<button class="ico collapseNode" onfocus="this.blur();" title="全部折叠" onclick="expandAll(false);"></button> 
				</ul>
				<ul class="operate">
					名称匹配搜索单个节点: <input type="text" value="手机" id="searchKey"></input>
					<button class="ico searchNode" onfocus="this.blur();" title="搜索" onclick="getNodeByParam();"></button>
					<br />getNodeByParam 方法演示（完全匹配）
				</ul>
				<ul class="operate">
					名称模糊搜索单个节点: <input type="text" value="电" id="searchKeyFuzzy"></input>
					<button class="ico searchNode" onfocus="this.blur();" title="搜索" onclick="getNodesByParamFuzzy();"></button>
					<br />getNodesByParamFuzzy 方法演示（模糊匹配）
				</ul>
				<ul class="operate">
					level搜索节点集合: <input type="text" value="0" id="searchKey2"></input>
					<button class="ico searchNode" onfocus="this.blur();" title="搜索" onclick="getNodesByParam();"></button>
					<br />getNodesByParam 方法演示（完全匹配）
				</ul>
			</li>
			
		</div>	
		</TD>
	</TR>
</TABLE>
</BODY>
</HTML>
